<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员管理</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
</head>
<body>
<!-- 组件导入 -->
{include file="/components/fileSelect"}
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>管理员管理</span>
        </div>
        <div class="search-box">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="管理员昵称">
                    <el-input v-model="searchForm.nickname" placeholder="" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addAdmin" style="margin-top: 10px">添加管理员
        </el-button>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
        <el-table
                :data="tableData"
                style="width: 100%;">
            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="登录名">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    label="头像">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" width="30px" height="30px">
                </template>
            </el-table-column>
            <el-table-column
                    prop="role.name"
                    label="角色">
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == 2">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="text" size="small" v-if="scope.row.id > 1">编辑</el-button>
                    <el-button @click="handleDel(scope.row)" type="text" size="small" v-if="scope.row.id > 1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin-top: 10px"
                background
                layout="->, prev, pager, next"
                :page-size="searchForm.limit"
                @current-change="handlePageChange"
                :total="total">
        </el-pagination>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" destroy-on-close>
            {include file="/admin/save"}
        </el-dialog>
    </el-card>

    <el-dialog title="" :visible.sync="fileSelectVisible" width="1200px" class="image-check-dialog">
        <file-select :need-select="true" @selected-img="selectedImg" @close-dialog="fileSelectVisible=false" :select-num="1"></file-select>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                searchForm: {
                    nickname: '',
                    limit: 15,
                    page: 1
                },
                fileSelectVisible: false,
                dialogVisible: false,
                title: '新增管理员',
                total: 1,
                tableData: [],
                baseIndex: '/{:config("shop.backend_index")}/',
                dialogCateVisible: false,
                form: {
                    id: 0,
                    name: '',
                    nickname: '',
                    password: '',
                    avatar: '',
                    role_id: '',
                    status: 1
                },
                roles: [],
                rules: {
                    name: [
                        {required: true, message: '请输入登录名称', trigger: 'blur'}
                    ],
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'}
                    ],
                    role_id: [
                        {required: true, message: '请选择所属角色', trigger: 'blur'}
                    ],
                    avatar: [
                        {required: true, message: '请设置头像', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '请选择状态', trigger: 'blur'}
                    ]
                },
                loading: false,
                formKey: Date.parse(new Date()),
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            // 获取列表
            async getList() {
                let res = await request.get(this.baseIndex + 'admin/index', this.searchForm)
                this.tableData = res.data.data
                this.total = res.data.total
            },
            // 初始化表单
            initForm() {
                this.form = this.$options.data().form
            },
            // 搜索
            onSubmit() {
                this.searchForm.page = 1
                this.getList()
            },
            addAdmin() {
                this.title = '添加管理员'
                this.initForm()
                this.dialogVisible = true
                this.rules.password = [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
                this.formKey = Date.parse(new Date())
                this.getAllRolesAdd()
            },
            // 编辑参数
            handleEdit(item) {
                this.title = '编辑管理员'
                delete this.rules.password
                this.formKey = Date.parse(new Date())
                this.dialogVisible = true

                this.form.id = item.id
                this.form.name = item.name
                this.form.nickname = item.nickname
                this.form.avatar = item.avatar
                this.form.role_id = item.role_id
                this.form.status = item.status

                this.getAllRolesEdit()
            },
            // 删除参数
            handleDel(item) {
                this.$confirm('此操作将永久删除该管理员 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.get(this.baseIndex + 'admin/del', {id: item.id})
                    if (res.code == 0) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(() => {
                });
            },
            // 选资源
            showImage() {
                this.fileSelectVisible = true
            },
            selectedImg(file) {
                this.form.avatar = file[0].url
                this.fileSelectVisible = false
            },
            // 移除图片
            removeImg() {
                this.form.avatar = ''
            },
            // 分页
            handlePageChange(page) {
                this.searchForm.page = page
                this.getList()
            },
            // 获取所有的角色 -add
            async getAllRolesAdd() {
                let res = await request.get(this.baseIndex + 'admin/add')
                this.roles = res.data
            },
            async getAllRolesEdit(){
                let res = await request.get(this.baseIndex + 'admin/edit')
                this.roles = res.data
            },
            // 新增或编辑
            optSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        let res;
                        if (this.form.id) {
                            res = await request.post(this.baseIndex + 'admin/edit', this.form)
                        } else {
                            res = await request.post(this.baseIndex + 'admin/add', this.form)
                        }
                        this.loading = false
                        if (res.code == 0) {
                            this.dialogVisible = false
                            this.$message.success(res.msg)
                            this.getList()
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                });
            }
        }
    });
</script>
<style>
    p {
        padding: 0;
        margin: 0;
    }

    .el-table__header tr,
    .el-table__header th {
        padding: 0;
        height: 20px;
        line-height: 20px;
    }

    .del-btn {
        cursor: pointer;
        color: #F56C6C
    }

    .add-btn {
        cursor: pointer;
        margin-top: 18px;
        color: #409EFF
    }
    .img-list {
        height: 60px;
        padding-left: 0;
        margin-top: 0;
    }
    .img-list li:first-child {
        margin-left: 0;
    }
    .img-list li {
        width: 58px;
        height: 58px;
        float: left;
        margin-left: 5px;
        cursor: pointer;
        position: relative;
    }
    .addImg {
        height: 56px;
        width: 56px;
        line-height: 56px;
        text-align: center;
        border: 1px dashed rgb(221, 221, 221);
    }
    ul li {list-style: none}
    .image-check-dialog .el-dialog__header {display: none}
    .image-check-dialog .el-dialog__body {padding: 0;}
    .img-list .img-tools {
        position: absolute;
        width: 58px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        top: 43px;
        background: rgba(0, 0, 0, 0.6);
        cursor: pointer;
    }
</style>
</body>
</html>